<template>
  <el-dialog title="提示" :visible.sync="roleVisible" width="50%">
    <!-- 复选框-->
    <el-checkbox-group v-model="checkList">
      <el-checkbox v-for="item in list" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
    </el-checkbox-group>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" type="primary" @click="fn">确 定</el-button>
      <el-button size="mini" @click="roleVisible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getRole } from '@/api/role'
import { putRole, getEmployeeInfo } from '@/api/employee'
export default {
  name: 'DistributionRole',
  components: {},
  props: {},
  data() {
    return {
      roleVisible: false,
      roleId: 0,
      checkList: [],
      list: []
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    open(id) {
      this.roleVisible = true
      this.roleId = id
      this.getEmployeeInfo()
      this.getRole()
    },
    async getRole() {
      const res = await getRole()
      console.log(res)
      this.list = res.data
    },
    // 确认提交
    async fn() {
      await putRole({
        id: this.roleId,
        roleIds: this.checkList
      })
      this.$message.success('分配角色成功！')
      this.roleVisible = false
    },
    // 获取员工基本信息
    async getEmployeeInfo() {
      const { data } = await getEmployeeInfo(this.roleId)
      this.checkList = data.roleIds
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>
